var time;
$(function () {
    time = setTimeout(function () {
        lightIcon()
    }, 4000);
    setTimeout(function () {
        setInterval(function () {
            lightIcon()
        }, 2000)
    }, 4000)
});
function lightIcon() {
    clearTimeout(time);
    $('#extend').find('.distribute').addClass('lightImgAction');
    setTimeout(function () {
        $('#extend').find('.distribute').removeClass('lightImgAction')
    }, 500)
}
var optionsdb0 = {
    id: 'db0',
    height: 11,
    width: 200,
    font_size: 10,
    font_color: 'rgba(175,205,245,0.8)',
    direction: 'down',
    deg: 'rotate(90deg)',
    linegra: 'no'
};
var optionsdb1 = {
    id: 'db1',
    height: 11,
    width: 200,
    font_size: 10,
    font_color: 'rgba(175,205,245,0.8)',
    direction: 'down',
    deg: 'rotate(90deg)',
    linegra: 'no'
};
var optionsdb2 = {
    id: 'db2',
    height: 11,
    width: 200,
    font_size: 10,
    font_color: 'rgba(175,205,245,0.8)',
    direction: 'up',
    deg: 'rotate(-55deg)',
    linegra: 'no'
};
var optionsdb3 = {
    id: 'db3',
    height: 11,
    width: 200,
    font_size: 10,
    font_color: 'rgba(175,205,245,0.8)',
    direction: 'up',
    deg: 'rotate(-55deg)',
    linegra: 'no'
};
var optionsdb4 = {
    id: 'db4',
    height: 11,
    width: 200,
    font_size: 10,
    font_color: 'rgba(175,205,245,0.8)',
    direction: 'up',
    deg: 'rotate(-70deg)',
    linegra: 'no'
};
var optionsdb5 = {
    id: 'db5',
    height: 11,
    width: 200,
    font_size: 10,
    font_color: 'rgba(175,205,245,0.8)',
    direction: 'up',
    deg: 'rotate(-70deg)',
    linegra: 'no'
};
var optionsdb6 = {
    id: 'db6',
    height: 11,
    width: 200,
    font_size: 10,
    font_color: 'rgba(175,205,245,0.8)',
    direction: 'down',
    deg: 'rotate(90deg)',
    linegra: 'no'
};
var optionsdb7 = {
    id: 'db7',
    height: 11,
    width: 200,
    font_size: 10,
    font_color: 'rgba(175,205,245,0.8)',
    direction: 'down',
    deg: 'rotate(90deg)',
    linegra: 'no'
};
var optionsdb8 = {
    id: 'db8',
    height: 11,
    width: 200,
    font_size: 10,
    font_color: 'rgba(175,205,245,0.8)',
    direction: 'down',
    deg: 'rotate(70deg)',
    linegra: 'no'
};
var optionsdb9 = {
    id: 'db9',
    height: 11,
    width: 200,
    font_size: 10,
    font_color: 'rgba(175,205,245,0.8)',
    direction: 'down',
    deg: 'rotate(70deg)',
    linegra: 'no'
};
var optionsdb10 = {
    id: 'db10',
    height: 11,
    width: 200,
    font_size: 10,
    font_color: 'rgba(175,205,245,0.8)',
    direction: 'down',
    deg: 'rotate(55deg)',
    linegra: 'no'
};
var optionsdb11 = {
    id: 'db11',
    height: 11,
    width: 200,
    font_size: 10,
    font_color: 'rgba(175,205,245,0.8)',
    direction: 'down',
    deg: 'rotate(55deg)',
    linegra: 'no'
};
var optionsdb12 = {
    id: 'db12',
    height: 11,
    width: 260,
    font_size: 10,
    font_color: 'rgba(175,205,245,0.8)',
    direction: 'down',
    deg: 'rotate(90deg)',
    linegra: 'no'
};
var optionsdb13 = {
    id: 'db13',
    height: 11,
    width: 260,
    font_size: 10,
    font_color: 'rgba(175,205,245,0.8)',
    direction: 'down',
    deg: 'rotate(90deg)',
    linegra: 'no'
};
var optionsdb14 = {
    id: 'db14',
    height: 11,
    width: 260,
    font_size: 10,
    font_color: 'rgba(175,205,245,0.8)',
    direction: 'down',
    deg: 'rotate(90deg)',
    linegra: 'no'
};
function maTrix2v(opt) {
    var c = document.getElementById(opt.id);
    var ctx = c.getContext('2d');
    c.style.transform = opt.deg;
    c.height = opt.height;
    c.width = opt.width;
    var font_size = opt.font_size;
    var font_color = opt.font_color;
    var rows = c.height / (font_size);
    var columns = c.width / (font_size);
    var direction = opt.direction;
    var Mat_init_flag = 0;
    var Martrix = new Array();
    function draw() {
        ctx.fillStyle = 'rgba(255, 255, 255, 1)';
        ctx.clearRect(0, 0, c.width, c.height);
        ctx.fillStyle = font_color;
        ctx.font = font_size + 'px arial';
        getMatrix(Martrix, rows, columns, direction);
        for (var i = 0; i < rows; i++) {
            for (var j = 0; j < columns; j++) {
                text = Martrix[i][j];
                var my_gradient = ctx.createLinearGradient(0, 0, opt.width, 0);
                switch (opt.linegra) {
                    case 'left':
                        my_gradient.addColorStop(0, 'white');
                        my_gradient.addColorStop(1, font_color);
                        break;
                    case 'right':
                        my_gradient.addColorStop(0, font_color);
                        my_gradient.addColorStop(1, 'white');
                        break;
                    default:
                        my_gradient = font_color
                }
                ctx.fillStyle = my_gradient;
                ctx.fillText(text, j * font_size - j * 3, i * font_size)
            }
        }
    }
    function getMatrix(arrayname, row, col, direc) {
        if (!Mat_init_flag) {
            for (var i = 0; i < row; i++) {
                arrayname[i] = new Array();
                for (var j = 0; j < col; j++) {
                    arrayname[i][j] = Math.floor(Math.random() * 2)
                }
            }
            Mat_init_flag = 1
        }
        if (direc === 'left' || direc === 'up') {
            left()
        } else {
            if (direc === 'right' || direc === 'down') {
                right()
            } else {
                return
            }
        }
        function down() {
            for (var i = row - 1; i > - 1; i--) {
                if (i > 0) {
                    for (var j = 0; j < col; j++) {
                        arrayname[i][j] = arrayname[i - 1][j]
                    }
                } else {
                    for (var j = 0; j < col; j++) {
                        arrayname[0][j] = Math.floor(Math.random() * 2);
                        if (Math.random() > 0.95) {
                            arrayname[0][j] = ''
                        }
                    }
                }
            }
        }
        function right() {
            for (var j = col - 1; j > - 1; j--) {
                if (j > 0) {
                    for (var i = 0; i < row; i++) {
                        arrayname[i][j] = arrayname[i][j - 1]
                    }
                } else {
                    for (var i = 0; i < row; i++) {
                        arrayname[i][0] = Math.floor(Math.random() * 2);
                        if (Math.random() > 0.95) {
                            arrayname[i][0] = ''
                        }
                    }
                }
            }
        }
        function left() {
            for (var j = 0; j < col; j++) {
                if (j < col - 1) {
                    for (var i = 0; i < row; i++) {
                        arrayname[i][j] = arrayname[i][j + 1]
                    }
                } else {
                    for (var i = 0; i < row; i++) {
                        arrayname[i][col - 1] = Math.floor(Math.random() * 2);
                        if (Math.random() > 0.95) {
                            arrayname[i][col - 1] = ''
                        }
                    }
                }
            }
        }
    }
    setInterval(draw, 140)
}
maTrix2v(optionsdb0);
maTrix2v(optionsdb1);
maTrix2v(optionsdb2);
maTrix2v(optionsdb3);
maTrix2v(optionsdb4);
maTrix2v(optionsdb5);
maTrix2v(optionsdb6);
maTrix2v(optionsdb7);
maTrix2v(optionsdb8);
maTrix2v(optionsdb9);
maTrix2v(optionsdb10);
maTrix2v(optionsdb11);
maTrix2v(optionsdb12);
maTrix2v(optionsdb13);
maTrix2v(optionsdb14);
